<template>
	<view>
		<!-- 头部 -->
		<u-sticky>
			<view class="dingbu mainpadding2">
				<view class="" :style="{paddingTop:menutop+'rpx'}">
					<view class="flexbetween">
						<view class="sanshis" @click="fhsyy">
							<view class="">
								<u-icon name="arrow-left" color="#000000" size="24"></u-icon>
							</view>
						</view>
						<view class="sanshis"></view>
						<view class="sanshis"></view>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="block dingwei mainpadding">
			<image class="dlbjt" src="../../static/image/system/dlbjt.png" mode=""></image>
			<view class="dingwei">
				<view class="sishi xiaohei fonweight">立即注册</view>
				<view class="xiahuaxian margin_top6">
					<input type="number" placeholder="请输入手机号码" v-model="mobile">
				</view>
				<view class="xiahuaxian margin_top flexbetween">
					<input type="number" placeholder="请输入手机验证码" v-model="yzm_code">
					<view class="xiaocheng xiaohuang textcenter"  style="min-width: 200rpx;" @click="sendyzm" v-show="codetext == 1">获取验证码</view>
					<view class="xiaocheng xiaohuang textcenter"  style="min-width: 200rpx;" v-show="codetext == 2">{{second}}s后重新获取</view>
					<view class="xiaocheng xiaohuang textcenter"  style="min-width: 200rpx;" @click="sendyzm" v-show="codetext == 3">重新发送</view>
				</view>
				<view class="xiahuaxian margin_top">
					<input type="text" placeholder="请输入密码" v-model="password">
				</view>
				<view class="xiahuaxian margin_top">
					<input type="text" placeholder="请再次输入密码" v-model="passwordt">
				</view>
				<view class="flexleft margin_top6" @click="checkaudio">
					<!-- 未选中 -->
					<view class="weixz margin_right1" v-if="!type"></view>
					<!-- 已选中 -->
					<view class="margin_right1" v-if="type">
						<u-icon name="checkmark-circle-fill" color="#FF8000" size="16"></u-icon>
					</view>
					<view class="flexleft">
						<view class="ershiba xiaohui">阅读并同意</view>
						<view class="ershiba xiaocheng" @click.stop="tzgywm(2)">《用户协议》</view>
						<view class="ershiba xiaohui">和</view>
						<view class="ershiba xiaocheng" @click.stop="tzgywm(3)">《隐私保护政策》</view>
					</view>
				</view>
				<view class="bigbtn margin_top" @click="signIn()"  v-if="!liandiantype">立即注册</view>
				<view class="bigbtn margin_top" v-if="liandiantype">立即注册</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				menutop: 0,
				type:false,
				codetext:1,
				second:59,
				mobile:'',
				yzm_code:'',
				password:"",
				passwordt:"",
				liandiantype:0
			}
		},
		onLoad() {
			this.menutop = uni.getMenuButtonBoundingClientRect().top * 2
		},
		methods: {
// 返回上一页
			fhsyy() {
				uni.navigateBack(1)
			},
			
				//验证手机号
				isMobile(value) {
					let a = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value); 
					return a;
				},
				//发送验证码
				sendyzm(){
					let _this = this;
					if(_this.mobile == ''){
						httpRequest.toast("请输入手机号码!")
						return;
					}
					if(!_this.isMobile(_this.mobile)){
						httpRequest.toast("手机号码格式错误!")
						return;
					}
					httpRequest.request('/api/sms/send','POST',{
						mobile:this.mobile,
						event:'register',
					},false,true,false).then(res => {
						if(res.code == 1){
							httpRequest.toast('发送成功')
							_this.codetext = 2;
							_this.second = 59;
							let timer = setInterval(function(){
								if(_this.second > 1){
									_this.second--;
								}else{
									clearInterval(timer);
									_this.codetext = 3;
								}
							},1000)
						}else{
							httpRequest.toast(res.msg)
						}
					})
				},
				checkaudio(){
					this.type = !this.type
				},
				signIn(){
					if(this.mobile==""){
						httpRequest.toast("请输入手机号");
						return false;
					}
					if(!this.isMobile(this.mobile)){
						httpRequest.toast("手机号码格式错误!")
						return;
					}
					if(this.yzm_code==""){
						httpRequest.toast("请输入验证码");
						return false;
					}
					if(this.password==""){
						httpRequest.toast("请输入密码")
						return false
					}
					if(this.passwordt==""){
						httpRequest.toast("请再次输入密码")
						return false
					}
					if(this.passwordt!=this.password){
						httpRequest.toast("两次密码输入不一致")
						return false
					}
					if(!this.type){
						httpRequest.toast("请认真阅读并勾选用户协议")
						return false
					}
					this.liandiantype = 1
					uni.showLoading({
						mask:true,
						title:"请稍候"
					})
					httpRequest.request('/api/user/register','GET',{
						mobile:this.mobile, 
						code:this.yzm_code,
						password:this.password
					}).then(res => {
						uni.hideLoading()
						if(res.code == 1){
							httpRequest.toast('注册成功');
							setTimeout(()=>{
								uni.navigateBack(1)
							},1000)
						}else{
							this.liandiantype = 0
							httpRequest.toast(res.msg);
						}
					})
				},
			
		}
	}
</script>

<style lang="scss" scoped>
	.dlbjt {
		width: 100%;
		height: 303rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.weixz {
		width: 24rpx;
		height: 24rpx;
		border: 1rpx solid #999999;
		border-radius: 50%;
	}

	.dingbu {
		height: 288rpx;
		background-size: 100% 100%;
		width: 100%;
		box-sizing: border-box;
		background-image: url('../../static/image/system/dltb.png');
	}
</style>